<template>
	<view>
		<view class="u-flex u-row-between title-area">
			<text class="title">输入验证码</text>
			<u-verification-code change-text="重新获取Xs" :seconds="60" ref="uCode" @change="codeChange">
			</u-verification-code>
			<button @click="getCode" size="mini" class="btn-again">{{tips}}</button>
		</view>
		<view class="tips">短信已发送至 {{phone}}</view>

		<view class="">
			<u-message-input @finish="finish" mode="box" :maxlength="6" focus bold></u-message-input>
		</view>
		<!-- <button @click="finish" class="btn-confirm">确定</button> -->

		<u-modal v-model="show" @confirm="confirm" :content="content" :showTitle="false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '重新获取',
				phone: '',
				show: false,
				content: '绑定成功',
				userinfo: JSON.parse(uni.getStorageSync('userinfo'))
			}
		},
		onLoad(opts) {
			this.phone = opts.phone
		},
		methods: {
			async finish(kaptchaCode) {
				uni.showLoading({ title: '正在加载', mask: true })
				let params = { code: kaptchaCode, ormtb410id: this.userinfo.ORMTB410ID }
				let [err, res] = await uni.request({
					url: this.baseUrl + '/web/bank/confirm',
					method: 'POST',
					dataType: 'json',
					data: params
				})
				uni.hideLoading()
				if (res.data.code === 0) {
					this.content = res.msg || '绑定成功'
					this.show = true
				} else {
					uni.showToast({ title: res.data.msg, icon: 'none' })
				}
				// let res = await this.$api.bindCardCode({ kaptchaCode })
				// if (res.code === 1) {
				// 	this.content = res.msg || '绑定成功'
				// 	this.show = true
				// }
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					let params = { ormtb410id: this.userinfo.ORMTB410ID }
					uni.showLoading({ title: '请稍候...', mask: true })
					let [err, res] = await uni.request({
						url: this.baseUrl + '/web/bank/send',
						method: 'POST',
						dataType: 'json',
						data: params
					})
					uni.hideLoading()
					console.log(res)
					if (res.data.code === 0) {
						uni.showToast({ title: '验证码已发送', icon: 'none' })
						this.$refs.uCode.start();
					}
				} else {
					uni.showToast({ title: '倒计时结束后再发送', icon: 'none' })
				}
			},
			confirm() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}

	.title-area {
		padding-top: 110rpx;
		margin: 0 64rpx;
	}

	.title {
		font-size: 44rpx;
	}

	.tips {
		font-size: 28rpx;
		color: #666;
		margin: 16rpx 64rpx 110rpx 64rpx;
	}

	.btn-again {
		margin: 0;
		font-size: 20rpx;
		border: 2rpx solid #333333;
		border-radius: 30rpx;
		background: #FFFFFF;
	}

	.btn-confirm {
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(136deg, #FFD902 0%, #FFB201 100%);
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: 200rpx;
		margin: 200rpx 64rpx 64rpx 64rpx;
		font-weight: 600;
	}
</style>
